<!--  -->
<template>
  <div class="demo_warp">
    all
    <div class="type19_time_add_warp">
      <div v-for="type19_loop in 100" :key="type19_loop">
        <!-- 时间轴回形针---时间轴 -->
        <div
          :class="type19_loop % 2 != 0 ? 'time_content' : 'time_contents'"
          v-if="type19_loop % 2 != 0"
        >
          <div
            class="time_content_option"
            v-for="(type_19, index_19) in type19_arr_file_funs(
              time_datas,
              type19_loop
            )"
            :key="index_19"
          >
            <div
              class="right_active_bottom"
              v-if="index_19 == 3 && time_datas.length > type19_loop * 4"
            >
              <div></div>
            </div>
            <div>
                <!-- 新增开关 -->
              <div class="time_top_active" v-if="!type_19.add"></div>
              <div
                class="time_top_actives"
                v-if="type_19.add"
                @click="type19_add_option(index, s)"
              >
                +
              </div>
              <div class="time_inner_content_warp" v-if="!type_19.add">
                <div
                  @mousedown.stop
                  v-html="type_19.title"
                ></div>
                <div class="time_inner_content" @mousedown.stop>
                  <div
                    v-html="type_19.text"
                  ></div>
                </div>
                <div class="time_active_del">
                  <el-button
                    @click="type19_del(type19_loop, index_19)"
                    size="mini"
                    type="primary"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          :class="type19_loop % 2 == 0 ? 'time_contents' : 'time_content'"
          v-if="type19_loop % 2 == 0"
        >
          <div
            class="time_content_option"
            v-for="(type_19, index_19) in type19_arr_file_funs(
              time_datas,
              type19_loop
            )"
            :key="index_19"
          >
            <div
              class="right_active_bottom"
              v-if="index_19 == 0 && time_datas.length > type19_loop * 4"
            >
              <div></div>
            </div>
            <div>
                <!-- 新增开关 -->
              <div class="time_top_active" v-if="!type_19.add"></div>
              <div
                class="time_top_actives"
                v-if="type_19.add"
                @click="type19_add_option(index, s)"
              >
                +
              </div>
              <div class="time_inner_content_warp" v-if="!type_19.add">
                <div
                  v-html="type_19.title"
                ></div>
                <div class="time_inner_content" @mousedown.stop>
                  <div
                    v-html="type_19.text"
                  ></div>
                </div>
                <div class="time_active_del">
                  <el-button
                    @click="type19_del(type19_loop, index_19, index, s)"
                    size="mini"
                    type="primary"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div></div>
    </div>
    new-最新8条
    <!-- 时间轴 ---19-->
    <div class="type19_time_add_warps">
      <div v-for="type19_loop in 100" :key="type19_loop">
        <!-- 时间轴回形针---时间轴 -->
        <div
          :class="type19_loop % 2 != 0 ? 'time_content' : 'time_contents'"
          v-if="type19_loop % 2 != 0"
        >
          <div
            class="time_content_option"
            v-for="(type_19, index_19) in type19_arr_file_fun(
              time_datas,
              type19_loop
            )"
            :key="index_19"
          >
            <div
              class="right_active_bottom"
              v-if="index_19 == 3 && time_datas.length > type19_loop * 4"
            >
              <div></div>
            </div>
            <div>
              <div class="time_top_active"></div>
              <div class="time_inner_content_warp">
                <div><span v-html="type_19.title"></span></div>
                <div class="time_inner_content" @mousedown.stop>
                  <div><span v-html="type_19.text"></span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          :class="type19_loop % 2 == 0 ? 'time_contents' : 'time_content'"
          v-if="type19_loop % 2 == 0"
        >
          <div
            class="time_content_option"
            v-for="(type_19, index_19) in type19_arr_file_fun(
              time_datas,
              type19_loop
            )"
            :key="index_19"
          >
            <div class="right_active_bottom" v-if="false">
              <div></div>
            </div>
            <div>
              <div class="time_top_active"></div>
              <div class="time_inner_content_warp">
                <div><span v-html="type_19.title"></span></div>
                <div class="time_inner_content" @mousedown.stop>
                  <div><span v-html="type_19.text"></span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import time_data from "./value";
import _ from "lodash"; //导入loadsh插件

export default {
  data() {
    return {
      time_datas: [],
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.time_datas = time_data;
  },

  methods: {
    type19_arr_file_fun(arr, i) {
      if (i > 2) return false;
      let arrs = _.cloneDeep(arr);
      if (arrs.length > 8) {
        arrs = arrs.splice(arrs.length - 8, 8);
      }
      if (i > arrs.length) return [];
      if (i % 2 == 0) {
        i -= 1;
        return arrs.splice(i * 4, 4).reverse();
      } else {
        if (i == 1) {
          return arrs.splice(0, 4);
        }
        i -= 1;
        return arrs.splice(i * 4, 4);
      }
    },
    type19_arr_file_funs(arr, i) {
      let arrs = _.cloneDeep(arr);
      if (i > arrs.length) return [];
      if (i % 2 == 0) {
        i -= 1;
        return arrs.splice(i * 4, 4).reverse();
      } else {
        if (i == 1) {
          return arrs.splice(0, 4);
        }
        i -= 1;
        return arrs.splice(i * 4, 4);
      }
    },
    type19_del(i, index, index_cont, index_s) {
      let n = _.cloneDeep(i);
      let s = "";
      if (i % 2 == 0) {
        s =
          index == 0
            ? 3
            : index == 1
            ? 2
            : index == 2
            ? 1
            : index == 3
            ? 0
            : "";
        n -= 1;
        n *= 4;
        s += n;
      } else {
        if (i == 1) {
          s = index;
        } else {
          s = index;
          n -= 1;
          n *= 4;
          s += n;
        }
      }
      this.time_datas.splice(s, 1);
    },
    type19_add_option(){},
  },
};
</script>
<style lang='scss' scoped>
.demo_warp {
  width: 100%;
  // height:400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.type19_time_add_warp {
  width: 700px;
  position: relative;
  .time_contents {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    .time_content_add {
      font-size: 16px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      z-index: 2;
    }
    .time_content_option {
      width: 25%;
      min-width: 100px;
      height: 137px;
      min-height: 137px;
      max-height: 137px;
      border-top: 1px solid #ddd;
      position: relative;
      .right_active_bottom {
        width: 63px;
        height: 139px;
        overflow: hidden;
        position: absolute;
        top: -1px;
        left: -63px;
        > div {
          width: 137px;
          height: 137px;
          border: 1px solid #ddd;
          border-radius: 100%;
          position: relative;
          right: 0px;
        }
      }
      > div {
        height: 100px;
      }
      .time_content_border {
        width: 106%;
        height: 1px;
        background-color: #ddd;
        position: absolute;
        top: 0px;
      }
      .left_time_active {
        width: 100px;
        height: 103px;
        border-left: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        left: -48px;
        top: -1px;
      }
      .right_time_active {
        width: 100px;
        height: 103px;
        border-right: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        right: -48px;
        top: -1px;
      }
      .time_top_active {
        position: absolute;
        top: -4px;
        left: 48%;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: #ddd;
      }
      .time_top_actives {
        position: absolute;
        top: -4px;
        left: 46%;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 100%;
        background-color: #ddd;
        color: #fff;
        font-size: 18px;
      }
      .time_inner_content_warp {
        box-sizing: border-box;
        padding: 20px;
        > div {
          display: flex;
          justify-content: center;
          outline: none;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_inner_content {
        width: 136px;
        height: 54px;
        margin: 0 auto;
        background: rgba(229, 0, 0, 0.05);
        border: 1px dotted #c20000;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        margin-top: 5px;
        box-sizing: border-box;
        padding: 7px;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        > div {
          outline: none;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_active_del {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        /deep/.el-button--mini {
          padding: 4px;
        }
        /deep/.el-button {
          border-radius: 4px;
        }
      }
    }
  }
  .time_content {
    width: 100%;
    display: flex;
    max-width: 822px;
    margin: 0 auto;
    position: relative;
    .time_content_add {
      font-size: 16px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      z-index: 2;
    }
    .time_content_option {
      width: 25%;
      min-width: 100px;
      height: 137px;
      min-height: 137px;
      max-height: 137px;
      border-top: 1px solid #ddd;
      position: relative;
      .right_active_bottom {
        width: 64px;
        height: 139px;
        overflow: hidden;
        position: absolute;
        top: -1px;
        right: -64px;
        > div {
          width: 137px;
          height: 137px;
          border: 1px solid #ddd;
          border-radius: 100%;
          position: relative;
          right: 75px;
        }
      }
      > div {
        height: 100px;
      }
      .time_content_border {
        width: 106%;
        height: 1px;
        background-color: #ddd;
        position: absolute;
        top: 0px;
      }
      .left_time_active {
        width: 100px;
        height: 103px;
        border-left: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        left: -48px;
        top: -1px;
      }
      .right_time_active {
        width: 100px;
        height: 103px;
        border-right: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        right: -48px;
        top: -1px;
      }
      .time_top_active {
        position: absolute;
        top: -4px;
        left: 48%;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: #ddd;
      }
      .time_top_actives {
        position: absolute;
        top: -4px;
        left: 46%;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 100%;
        background-color: #ddd;
        color: #fff;
        font-size: 18px;
      }

      .time_inner_content_warp {
        box-sizing: border-box;
        padding: 20px;
        > div {
          outline: none;
          display: flex;
          justify-content: center;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_inner_content {
        width: 136px;
        height: 54px;
        margin: 0 auto;
        background: rgba(229, 0, 0, 0.05);
        border: 1px dotted #c20000;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 5px;
        box-sizing: border-box;
        padding: 4px;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        > div {
          outline: none;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_active_del {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        /deep/.el-button--mini {
          padding: 4px;
        }
        /deep/.el-button {
          border-radius: 4px;
        }
      }
    }
  }
}
.type19_time_add_warps {
  width: 700px;
  position: relative;
  .time_contents {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    .time_content_add {
      font-size: 16px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      z-index: 2;
    }
    .time_content_option {
      width: 25%;
      min-width: 100px;
      height: 137px;
      min-height: 137px;
      max-height: 137px;
      border-top: 1px solid #ddd;
      position: relative;
      .right_active_bottom {
        width: 63px;
        height: 139px;
        overflow: hidden;
        position: absolute;
        top: -1px;
        left: -63px;
        > div {
          width: 137px;
          height: 137px;
          border: 1px solid #ddd;
          border-radius: 100%;
          position: relative;
          right: 0px;
        }
      }
      > div {
        height: 100px;
      }
      .time_content_border {
        width: 106%;
        height: 1px;
        background-color: #ddd;
        position: absolute;
        top: 0px;
      }
      .left_time_active {
        width: 100px;
        height: 103px;
        border-left: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        left: -48px;
        top: -1px;
      }
      .right_time_active {
        width: 100px;
        height: 103px;
        border-right: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        right: -48px;
        top: -1px;
      }
      .time_top_active {
        position: absolute;
        top: -4px;
        left: 48%;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: #ddd;
      }
      .time_top_actives {
        position: absolute;
        top: -4px;
        left: 46%;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 100%;
        background-color: #ddd;
        color: #fff;
        font-size: 18px;
      }
      .time_inner_content_warp {
        box-sizing: border-box;
        padding: 20px;
        > div {
          display: flex;
          justify-content: center;
          outline: none;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_inner_content {
        width: 136px;
        height: 54px;
        margin: 0 auto;
        background: rgba(229, 0, 0, 0.05);
        border: 1px dotted #c20000;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        margin-top: 5px;
        box-sizing: border-box;
        padding: 7px;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        > div {
          outline: none;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_active_del {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        /deep/.el-button--mini {
          padding: 4px;
        }
        /deep/.el-button {
          border-radius: 4px;
        }
      }
    }
  }
  .time_content {
    width: 100%;
    display: flex;
    max-width: 822px;
    margin: 0 auto;
    position: relative;
    .time_content_add {
      font-size: 16px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      z-index: 2;
    }
    .time_content_option {
      width: 25%;
      min-width: 100px;
      height: 137px;
      min-height: 137px;
      max-height: 137px;
      border-top: 1px solid #ddd;
      position: relative;
      .right_active_bottom {
        width: 64px;
        height: 139px;
        overflow: hidden;
        position: absolute;
        top: -1px;
        right: -64px;
        > div {
          width: 137px;
          height: 137px;
          border: 1px solid #ddd;
          border-radius: 100%;
          position: relative;
          right: 75px;
        }
      }
      > div {
        height: 100px;
      }
      .time_content_border {
        width: 106%;
        height: 1px;
        background-color: #ddd;
        position: absolute;
        top: 0px;
      }
      .left_time_active {
        width: 100px;
        height: 103px;
        border-left: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        left: -48px;
        top: -1px;
      }
      .right_time_active {
        width: 100px;
        height: 103px;
        border-right: 2px solid #ddd;
        border-radius: 100%;
        position: absolute;
        right: -48px;
        top: -1px;
      }
      .time_top_active {
        position: absolute;
        top: -4px;
        left: 48%;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: #ddd;
      }
      .time_top_actives {
        position: absolute;
        top: -4px;
        left: 46%;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 100%;
        background-color: #ddd;
        color: #fff;
        font-size: 18px;
      }

      .time_inner_content_warp {
        box-sizing: border-box;
        padding: 20px;
        > div {
          outline: none;
          display: flex;
          justify-content: center;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_inner_content {
        width: 136px;
        height: 54px;
        margin: 0 auto;
        background: rgba(229, 0, 0, 0.05);
        border: 1px dotted #c20000;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 5px;
        box-sizing: border-box;
        padding: 4px;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        > div {
          outline: none;
          min-height: 20px;
          min-width: 20px;
        }
      }
      .time_active_del {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        /deep/.el-button--mini {
          padding: 4px;
        }
        /deep/.el-button {
          border-radius: 4px;
        }
      }
    }
  }
}
</style>